<template>
  <div>
    <el-container>
      <el-main style="height: 1000px;">
        <el-row v-for="item in lineList" :key="item.id" :gutter="20" style="border-top: 1px solid #eee;">
          <el-col :span="8" v-for="data in item.position" :key="data.id">
            <div class="grid-content bg-purple-dark">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>卡片名称</span>
                  <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                </div>
                <div v-for="o in 4" :key="o" class="text item">
                  {{'列表内容 ' + o }}
                </div>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </el-main>
      <el-aside style="height: 1000px;">
        <el-card class="box-card">
          <div class="text item">
            生产产品类型&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ productType }}
          </div>
          <div class="text item">
            当日生产数量&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ dailyProduction }}
          </div>
          <div class="text item">
           当日次品数据&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ defective }}
          </div>
        </el-card>
        <div class="chart-wrapper" style="margin-top: 50px">
          <line-load-chart />
        </div>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import LineLoadChart from './components/lineLoadChart'
import { getLineInfo, getProductInfo } from '@/api/line'
export default {
  name: 'Line',
  components: {
    LineLoadChart
  },
  data() {
    return {
      lineList: [
        {
          'id': 1,
          'position': [
            {
              'id': 1
            },
            {
              'id': 2
            },
            {
              'id': 3
            }
          ]
        },
        {
          'id': 2,
          'position': [
            {
              'id': 1
            },
            {
              'id': 2
            }
          ]
        }
      ],
      list: [],
      productType: '',
      dailyProduction: '',
      defective: ''
    }
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      getLineInfo().then(response => {
        this.list = response.data
      })
      getProductInfo().then(response => {
        response = response.data
        this.productType = response.type
        this.dailyProduction = response.production
        this.defective = response.defective
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
  .el-row {
      margin-top 10px
      margin-left 10px
      margin-bottom: 20px;
    &:last-child {
       margin-bottom: 0;
     }
    }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width 100%
    /*width: 480px;*/
    margin-top .5rem
  }
</style>
